<template>
  <div class="analyze">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" class="image" style="width:100%;height:inherit;" />
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card style="height: 300px;width: 100%;" class="box-card">
            <div slot="header" class="clearfix">
              <span>待办事项</span>
              <el-button style="float: right; padding: 3px 0" @click="message" type="text">办理</el-button>
            </div>
           <el-table
             :data="datas"
             border
             size = "medium"
             v-loading="loading"
             class="table">
             <el-table-column
             align="center"
               prop="vars.title"
               label="实例标题">
             </el-table-column>
             <el-table-column
             align="center"
               prop="procDef.name"
               label="流程名称">
             </el-table-column>
              <el-table-column
               prop="task.name"
               align="center"
               label="当前环节">
                 <template slot-scope="scope">
                   <el-tag>{{scope.row.task.name}}</el-tag>
                </template>
             </el-table-column>
              <el-table-column
               prop="vars.userName"
               align="center"
               label="流程发起人">
             </el-table-column>
             <el-table-column
               prop="task.createTime"
               align="center"
               show-overflow-tooltip
               label="创建时间">
                <template slot-scope="scope">
                 {{scope.row.task.createTime | formatDate}}
                </template>
             </el-table-column>
           </el-table>
          </el-card>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card style="width: 100%; height: 300px;" class="box-card">
            <div slot="header" class="clearfix">
              <span>通知</span>
              <el-button style="float: right; padding: 3px 0" @click="details" type="text">详情</el-button>
            </div>
            <el-table
              :data="dataList"
              size="medium"
              v-loading="loading"
              class="table">
            <el-table-column
                prop="title"
                align="center"
                label="标题">
              </el-table-column>
            <el-table-column
                prop="content"
                align="center"
                show-overflow-tooltip
                label="内容">
              </el-table-column>
              <el-table-column
                prop="createBy.name"
                align="center"
                label="发布者">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple" >
          <el-card style=" height: 200px; width: 100%;" class="box-card">
            <div  style="text-align: center;">
                <el-link @click="pushSystem" style="text-decoration: none;">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-visit" style="text-align: center;">
                <i class="el-icon-s-order card-panel-icon"></i>
              </div>
            </div>
                <div class="card-panel-text" style="font-size: 28px;text-align: center; text-decoration: none;" >
                  规章制度
                </div>
                </el-link>
                </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card style=" height: 200px; width: 100%;" class="box-card">
            <div  style="text-align: center;">
                <el-link @click="initiateProcess" style="text-decoration: none;">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-location" style="text-align: center;">
                <i class="el-icon-s-flag card-panel-icon"></i>
              </div>
            </div>
            <div class="card-panel-text" style="font-size: 28px;text-align: center;" >
                  任务发布
                </div>
                </el-link>
                </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card style=" height: 200px; width: 100%;" class="box-card">
            <div  style="text-align: center;">
                <el-link @click="MyCalendar" style="text-decoration: none;">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people" style="text-align: center;">
                <i class="el-icon-date card-panel-icon"></i>
              </div>
            </div>
                <div class="card-panel-text" style="font-size: 28px;text-align: center;" >
                  我的日程
                </div>
                </el-link>
                </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card style=" height: 200px;text-decoration: none; width: 100%;" class="box-card">
            <div  style="text-align: center;">
                <el-link @click="personalDetails" style="text-decoration: none;">
            <div class="card-panel" style="text-decoration: none;">
              <div class="card-panel-icon-wrapper icon-sell" style="text-align: center; text-decoration: none;">
                <i class="el-icon-s-custom card-panel-icon" style="text-decoration: none;"></i>
              </div>
            </div>
                <div class="card-panel-text" style="font-size: 28px;text-align: center;" >
                  个人信息
                </div>
                </el-link>
                </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data () {
      return {
                imagebox: [{
                    id: 0,
                    idView: require('./images/1.jpg')
                  },
                  {
                    id: 1,
                    idView: require('./images/2.jpg')
                  },
                  {
                    id: 2,
                    idView: require('./images/3.jpg')
                  },
                  {
                    id: 3,
                    idView: require('./images/4.jpg')
                  }
                ],
        dataList: [],
        loading: false,
        total: [], // 存入60秒数据
        searchForm: {
          title: '',
          content: '',
          createBy: {
            name: ''
          }
        },

        inputForm: {
        beginDate: '',
        endDate: '',
        vars: {
          title: '',
          userName: ''
        },
        procDef: {
          name: ''
        },
        task: {
          name: '',
          createTime: ''
        }
        },
        datas: []
      }
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }
    },
    activated () {
      this.aa()
      this.bb()
    },
    methods: {
      aa () {
        this.loading = true
        this.$http({
          url: '/flowable/task/todo',
          method: 'get',
          params: {
            'pageNo': 1,
            'pageSize': 3
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.datas = data.page.list
          }
          this.loading = false
        })
      },
      bb () {
        this.loading = true
       this.$http({
         url: '/notify/oaNotify/list?isSelf=true',
         method: 'get',
         params: {
           'pageNo': 1,
           'pageSize': 4,
           'orderBy': '',
           ...this.searchForm
         }
       }).then(({data}) => {
         if (data && data.success) {
           this.dataList = data.page.list
         }
         this.loading = false
       })
      },
      initiateProcess () {
        this.$router.push('/flowable/task/ProcessList')
      },
      personalDetails () {
        this.$router.push('/sys/user/UserInfo')
      },
      MyCalendar () {
        this.$router.push('/calendar/MyCalendar')
      },
      pushSystem () {
        this.$router.push('/regulation/RulesRegulationsList')
      },
      message () {
        this.$router.push('/flowable/task/TodoList')
      },
      details () {
        this.$router.push('/notify/OaNotifyList')
      },
      changBackground (flag) {
        switch (flag) {
          case 1:
            console.log('获取焦距')
            this.$refs.color.style.background = '#f4516c'
            break
          case 2:
            console.log('失去焦距')
            this.$refs.color.style.background = 'white'
            break
          default:
            break
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-link  {
    text-decoration: none;
  }
  .el-table-column {

  }
  .el-icon-s-custom {
    font-size: 75px;
    color: #a39f9f;
  }
  .el-icon-s-order {
    font-size: 75px;
    color: #b93d5c;
  }
  .el-icon-s-flag {
    font-size: 75px;
    color: #40c9c6;
  }
  .el-icon-date {
    font-size: 75px;
    color: #00ba00;
  }
  .el-icon-user {
    font-size: 100px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
      .analyze {
          .top-1 {
              top: 0.55rem;
          }
          .mt-0 {
              margin-top: 0;
          }

          .m-3 {
              margin-bottom: 0.75rem;
          }

          .right-0 {
              right: 200px;
          }
          .absolute {
              position: absolute;
          }
          .float-left {
              float: left;
          }
          .flex {
              display: flex;
          }
          .card-panel {
              height: 108px;
              cursor: pointer;
              font-size: 12px;
              position: relative;
              overflow: hidden;
              color: #ffffff;
              background: #ffffff;
              border-color: rgba(255, 255, 255, 0.0);
              &:hover {
                  .card-panel-icon-wrapper {
                      color: #fff;
                  }
                  .icon-sell {
                      background: #6778fa;
                  }
                  .icon-people {
                      background: #40c9c6;
                  }
                  .icon-location {
                      background: #36a3f7;
                  }
                  .icon-visit {
                      background: #f4516c;
                  }
              }
              .icon-sell {
                  color: #bfbbbb;
              }
              .icon-people {
                  color: #58d300;
              }
              .icon-location {
                  color: #44d6d1;
              }
              .icon-visit {
                  color: #f4516c;
              }
              .card-panel-icon-wrapper {
                  float: left;
                  margin: 14px 0 0 14px;
                  padding: 16px;
                  transition: all 0.38s ease-out;
                  border-radius: 6px;
              }
              .card-panel-icon {
                  float: left;
                  font-size: 48px;
              }
              .card-panel-description {
                  float: right;
                  font-weight: bold;
                  margin: 26px;
                  margin-left: 0px;

                  .card-panel-num {
                      font-size: 20px;
                  }
              }
          }
      }
</style>
